<!--
 * @Autor: 王琛
 * @Description: 普通的ppt页面
 * @Copyright: 版权归个人所有
-->
<style lang="stylus" scoped>
#ppt {
  width: 100%;
  height: 100%;
  position: relative;

  .logo {
    position: absolute;
    z-index: 11;
  }

  .rightBtn {
    width: 65px;
    height: 70%;
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    align-content: center;

    .rightBtnItme {
      width: 100%;
      font-size: 12px;
      padding: 8px 0;
      box-sizing: border-box;
      background: linear-gradient(0deg, #cc9f84 0%, #e0d1ba 100%);
      color: #FFFFCC;
      text-align: center;
      border-top-left-radius: 25px;
      border-bottom-left-radius: 25px;
      margin-bottom: 10px;
    }

    .rightBtnItme:last-child {
      margin-bottom: 0px;
    }
  }

  .thumbnailImg {
    width: 100%;
    height: 100%;
    display: flex;
  }

  .my-swipe {
    width: 100%;
    height: 100%;

    .van-swipe-item {
      & > img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .thumbnailImg {
    width: 100%;
    height: 100%;
    display: flex;
  }

  .panoramaWalkthrough {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px
    background: rgba(0, 0, 0, 1);
    z-index: 101;

    :deep(.el-icon) {
      position: absolute;
      top: 50px;
      right: 10px;
      background: rgba(0, 0, 0, .5);
      border-radius: 30px;
      padding: 2px;
      box-sizing: border-box;
      z-index: 103;
    }

    .RightBottomBtn {
      width: 80px;
      height: 100%;
      position: absolute;
      top: 0px;
      right: 10px;
      z-index: 102;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      align-content: flex-end;

      .Btn {
        width: 100%;
        height: 30px;
        background: url('http://www.yisichenvr.fun/static/瑞熹苑/户型体验/按钮/11.png') no-repeat center center / 100% 100%;
        margin: 10px 0px;
        color: #fff;
        font-size: 14px;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: all .5s;
      }

      .Btn_Select {
        background: url('http://www.yisichenvr.fun/static/瑞熹苑/户型体验/按钮/22.png') no-repeat center center / 100% 100%;

      }
    }
  }
}
</style>


<template>
  <div id="ppt" :style="{ background: `url('${ _data.bg_url }') no-repeat center center / 100% 100%` }">
    <!-- logo -->
    <img v-if="_data.fnList.includes('logo')" class="logo" :style="{ ..._data.logoConfig.positon,..._data.logoConfig.size }" :src="_data.logoConfig.url" alt="">
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" ref="_my_swipe" :loop="false" :show-indicators="false" @change="swiperChange">
      <!-- 带有缩略图的功能 -->
      <template v-if="_data.fnList.includes('thumbnail')">
        <div class="thumbnailImg" v-viewer="{navbar:true,url:'dataSrc'}">
          <van-swipe-item v-for="(item,index) in _data.img_list" :key="index">
            <img style="width: 100%; height: 100%" :src="item" :dataSrc="_data.thumbnail_list[index]" alt="" srcset="">
            <!-- 右侧按钮 -->
            <div v-if="_data.fnList.includes('rightBtn')" class="rightBtn">
              <template v-for="(item,rightBtn_index) in _data.rightBtnConfig">
                <!-- 按钮列表 -->
                <div v-if="_data.rightBtnItemConfig.hasOwnProperty(item.fnType) && _data.rightBtnItemConfig[item.fnType][index]" class="rightBtnItme" :key="rightBtn_index" @click="rightBtnClick({ item,index })">
                  {{
                    item.name
                  }}
                </div>
              </template>
            </div>
          </van-swipe-item>
        </div>
      </template>
      <!-- 没有缩略图的功能 -->
      <template v-else>
        <van-swipe-item v-for="(item,index) in _data.img_list" :key="index">
          <img :src="item" alt="" srcset="">
          <!-- 右侧按钮 -->
          <div v-if="_data.fnList.includes('rightBtn')" class="rightBtn">
            <template v-for="(item,rightBtn_index) in _data.rightBtnConfig">
              <!-- 按钮列表 -->
              <div v-if="_data.rightBtnItemConfig.hasOwnProperty(item.fnType) && _data.rightBtnItemConfig[item.fnType][index]" class="rightBtnItme" :key="rightBtn_index" @click="rightBtnClick({ item,index })">
                {{
                  item.name
                }}
              </div>
            </template>
          </div>
        </van-swipe-item>
      </template>
    </van-swipe>
    <!-- 全景漫游 -->
    <div v-show="_data._3DModeConfig || _data._720Config" class="panoramaWalkthrough">
      <!-- 关闭按钮 -->
      <el-icon :size="25" color="#fff" @click="_data._720Config = null;_data._3DModeConfig = null">
        <circle-close></circle-close>
      </el-icon>
      <!-- 右下角按钮 -->
      <div class="RightBottomBtn">
        <div v-for="(item,index) in _data._3DModeConfig?.Children  || []" :key="index" :class="{Btn:true,Btn_Select:_data.CurLayered?.Name === item.Name}" @click="ClickModelLayered(item)">
          {{ item.Name }}
        </div>
      </div>
      <!-- 全景漫游 -->
      <homeView v-if="_data._720Config" :config="_data._720Config"></homeView>
      <!-- 3d鸟瞰 -->
      <modelLoading v-if="_data.CurLayered" :config="_data.CurLayered" :key="_data.CurLayered.name"></modelLoading>
    </div>
  </div>
</template>

<script setup lang="ts">
import {onMounted, reactive, ref, watch} from "vue";
import {useRoute, useRouter} from "vue-router";
import {useStore} from "vuex";
import {Swipe, SwipeItem} from 'vant';
import {emitter} from "tool";
import {CircleClose} from "@element-plus/icons"
import homeView from "src/view/home.vue"
import modelLoading from "src/components/modelLoading.vue"


const _props = defineProps({});
const _route = useRoute();
const _router = useRouter();
const _store = useStore();
const _state = _store.state;
const _my_swipe = ref(null)
const _data = reactive({
  // 功能列表
  fnList: [],
  // 轮播图展示图片列表
  img_list: [],
  // 缩略图列表
  thumbnail_list: [],
  // 主要背景图
  bg_url: "",
  // logo配置
  logoConfig: {
    positon: {},
    size: {},
    url: "",
  },
  // 右侧按钮配置
  rightBtnConfig: [],
  // 单项按钮的配置
  rightBtnItemConfig: {},
  // 展示720的时候的配置
  _720Config: null,
  // 3D模块配置
  _3DModeConfig: null,
  // 当前点击的按钮分层按钮
  CurLayered: {}
});
onMounted(() => {
  // 页面初始化
  emitter.emit("unitAppreciation", {
    index: 0,
  })
})

/**
 * @description: 页面数据初始化
 * @author: 王琛
 * @Date: 2022-11-02 15:57:22
 * @param {*}
 * @return {*}
 */
function Init() {
  // 解构路由信息
  const {query: newRouteQuery} = _state.currentRouterInfo;
  // 接口配置信息
  const configTotal = _state.currentSelectMenu.main?.config || {};

  interface logoConfig_inter {
    // logo 位置
    position: any,
    // logo大小
    size: any,
    // logo 地址
    url: string
  }

  interface curConfig_inter {
    // 主要图片的连接地址
    url: string,
    // 每张轮播图的名称和图片连接地址拼接生成展示图片整体url
    img_name_str: string,
    // 如果有背景这个是完整的背景图片
    bg_img?: string,
    // 放大图的地址
    thumbnailUrl?: string,
    // 放大图的名称,和放大图地址拼接后生成完整的放大图连接
    thumbnai_name_str?: string,
    // 右侧按钮配置
    right_btn_list?: any,
    // logo配置
    logoConfig?: logoConfig_inter,
    // 右侧数据按钮配置
    right_btn_config?: any
  }

  // 获取当前配置
  const curConfig: curConfig_inter = configTotal[newRouteQuery.configKey];

  if (!curConfig) return;
  // 解析pageType属性
  const fnList: string[] = newRouteQuery?.pageType ? newRouteQuery?.pageType.split("_") : [];
  // 更新数据中的功能列表
  _data.fnList = fnList;
  // 播图主图名称列表
  const img_name_list = curConfig?.img_name_str ? curConfig.img_name_str.split(",") : [];
  // 更新本地录播图主图
  _data.img_list = img_name_list.map(e => `${curConfig.url}${e}`);
  // 更新组件内部底图暗图
  if (curConfig?.bg_img) _data.bg_url = curConfig.bg_img;
  console.log('%c王琛-161044', 'color:#fff;background:#ee6f57;padding:3px;border-radius:2px', img_name_list);
  // 判断是否有缩略图
  if (fnList.includes("thumbnail")) {
    // 缩略图主图名称列表
    const thumbnai_name_list = curConfig?.thumbnai_name_str ? curConfig.thumbnai_name_str.split(",") : [];
    // 更新本地录播图主图
    _data.thumbnail_list = thumbnai_name_list.map(e => `${curConfig.thumbnailUrl}${e}`);
  }
  // 判断是否有右侧按钮
  if (fnList.includes("rightBtn")) {
    if (curConfig?.right_btn_list) {
      _data.rightBtnConfig = curConfig.right_btn_list;
      _data.rightBtnItemConfig = curConfig.right_btn_config;
    }
    ;
  }
  // 判断是否有logo
  if (fnList.includes("logo")) {
    if (curConfig?.logoConfig) _data.logoConfig = curConfig.logoConfig;
  }
}

// 监听一级菜单变化之后
watch(() => _state.currentSelectMenu.one, (newOne) => {
  _my_swipe.value.swipeTo(newOne.index)
})
// 监听二级菜单变化之后
watch(() => _state.currentSelectMenu.two, (newTwo) => {
  _my_swipe.value.swipeTo(newTwo.index)
})
watch(() => _route.query, () => {
  Init();
}, {deep: true, immediate: true})

/**
 * @description: 轮播图发生变化之后
 * @author: 王琛
 * @Date: 2022-08-01 14:04:42
 * @param {*}
 * @return {*}
 */
function swiperChange(index) {
  emitter.emit("unitAppreciation", {
    index,
  })
  console.log('%c王琛-140506', 'color:#fff;background:#ee6f57;padding:3px;border-radius:2px', index);
}

/**
 * @description: 点击了按钮需求
 * @author: 王琛
 * @Date: 2022-11-03 11:49:03
 * @param {*}
 * @return {*}
 */

interface rightBtnClick_inter {
  item: {
    name: string,
    "fnType": "3D" | "720"
  },
  index: number
}

function rightBtnClick({item, index}: rightBtnClick_inter): void {
  console.log('%c日志-161459', 'color:#fff;fontSize:15px;background:#993366;padding:5px 8px;border-radius:12px', index);

  // 判断点击的是那个 功能
  const fnKey: string = item.fnType;
  // 获取点击的按钮功能的配置
  const fnConfig: any = _data.rightBtnItemConfig[fnKey];
  console.log('%c日志-161537', 'color:#fff;fontSize:15px;background:#993366;padding:5px 8px;border-radius:12px', fnConfig, fnConfig[index]);
  // 如果点击的720
  if (fnKey == "720") {
    _data._720Config = {
      "assembly": true,
      "pageType": "iframe",
      "url": fnConfig[index]
    }
  } else {
    _data._3DModeConfig = fnConfig[index];

    ClickModelLayered(_data._3DModeConfig?.Children[0])
  }
}

/**
 * @description: 点击了按钮分成按钮
 * @author: 王琛
 * @Date: 2024-12-04 23:10:34
 * @param {*}
 * @return {*}
 */
function ClickModelLayered(Config) {
  console.log('%c日志-231351', 'color:#fff;fontSize:15px;background:#993366;padding:2px 5px;border-radius:6px', Config);
  _data.CurLayered = Config;
}


</script>

